<template>
  <div>
    <h2>总价值: {{ $store.getters.totalPrice }}</h2>
    <h2>总价值: {{ $store.getters.totalPriceCountGreaterN(1) }}</h2>
    <hr>
    <h2>{{ nameInfo }}</h2>
    <h2>{{ ageInfo }}</h2>
    <h2>{{ heightInfo }}</h2>
    <hr>
  </div>
</template>

<script>
import { computed } from 'vue'
import { mapGetters, useStore } from 'vuex'

  export default {
    computed: {

    },
    setup() {
      // 拿到store独享
      const store = useStore()

      // const totolPrice=computed(()=>store.getters.totalPrice)

      // 获取到对应的对象的functions: {name: function, age: function}
      const storeGetterFns = mapGetters(["nameInfo", "ageInfo", "heightInfo"])
 
      // 对数据进行转换
      const storeGetters = {}
      Object.keys(storeGetterFns).forEach(fnKey => {
        const fn = storeGetterFns[fnKey].bind({$store: store})
        storeGetters[fnKey] = computed(fn)
      })

      return {
        ...storeGetters,
        // totolPrice
      }
    }
  }
</script>

<style scoped>

</style>